<template lang="pug">
.login_page
    .login_background
    .title(@click.prevent="()=>router.push('/index')") EmpShop
    .login_box(v-show="isLoginPage" )
        div.Login_Title Sign In
        form.Login_form
            ul
                li(v-for="(item,index) in login_blank_list" :key="index" )
                    .form_title {{item.msg}}
                    input(v-model="item.vmode" :type="item.type"
                        :placeholder="item.placeholder" required=true autocomplete
                    minlength="3" maxlength="20")

            button.loginButton(@click.prevent="LoginButton") Sign In
    .register_box(v-show="!isLoginPage" )
        div.Login_Title Join Us
        form.Login_form
            ul
                li(v-for="(item,index) in regist_blank_list" :key="index" )
                    .form_title {{item.msg}}
                    input(v-model="item.vmode" :type="item.type" autocomplete
                    :placeholder="item.placeholder" required=true
                        minlength="3" maxlength="64")
            button.emailButton(@click.prevent="GetEmailSendCode") GetEmailCode
            button.loginButton(@click.prevent="RegistButton") Sign Up
    .changeToRegister(@click="changePage") To Change
    .desss © 2023 EmpShop Corporation. All rights reserved. All trademarks are property of their respective owners in the US and other countries.

</template>

<script lang="ts" setup>

import {ref, watchEffect} from "vue"
import {LogError, LogSuccess} from "../../utils/notification/Index";
import {EmailSendCode, Login, Regist} from "../../reqApi/LoginApi";
import type {ResultInfo} from "../../utils/types/ResultInfo";
import type {LoginInfoTemp} from "../../utils/types/LoginTepm";
import {Temp} from "../../utils/Constant";
import {useRouter} from "vue-router";
import {StoreLoginState} from "../../store/userInfo";

const router = useRouter()
let isLoginPage = ref(true)

const ref_email = ref("")
const ref_password = ref("")
const ref_rePassword = ref("")
const ref_emailcode = ref("")

const login_blank_list = ref([
    {msg: "Email", vmode: ref_email, type: "email", placeholder: "example@example.com"},
    {msg: "Password", vmode: ref_password, type: "password", placeholder: "your password"},
])
const regist_blank_list = ref([
    {msg: "Email", vmode: ref_email, type: "email", placeholder: "example@example.com"},
    {msg: "Password", vmode: ref_password, type: "password", placeholder: "your password"},
    {msg: "RePassword", vmode: ref_rePassword, type: "password", placeholder: "re password"},
    {msg: "EmailCode", vmode: ref_emailcode, type: "text", placeholder: "email code"}
])
const double_password = {
    ref_password,
    ref_rePassword,
}

watchEffect(() => {
    let isSample = double_password.ref_password.value.trim() === double_password.ref_rePassword.value.trim()
    if (isSample && double_password.ref_password.value.trim().length > 3) {
        LogSuccess("password yes")
    }
})
watchEffect(() => {
    const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if (ref_email.value.search(reg) != -1) {
        LogSuccess("email yes")
    }
})
watchEffect(() => {
    if (ref_emailcode.value.length > 3) {
        LogSuccess("email code yes")
    }
})
// 2297895053@qq.com
const LoginButton = () => {
    Login(
        {
            email: ref_email.value,
            password: ref_password.value
        }
    ).then(resp => {
            let parse = resp.data as ResultInfo<LoginInfoTemp>;
            LogSuccess(parse.msg)
            setTimeout(() => {
                if (parse.success) {
                    localStorage.setItem(Temp.Token, parse.data?.token || "")
                    if (StoreLoginState().Get()) {
                        router.push("/index")
                    }
                }
            }, 500)


        }
    )
}
const RegistButton = () => {
    Regist(
        {
            email: ref_email.value,
            password: ref_password.value,
            email_code: ref_emailcode.value
        }
    ).then(resp => {
            let parse = resp.data as ResultInfo<any>;
            if (parse.success) {
                LogSuccess(parse.msg)
                router.go(0)
            }
            LogError(parse.msg)

        }
    )
}
const GetEmailSendCode = () => {
    EmailSendCode(
        {
            email: ref_email.value,
        }
    ).then(resp => {
        let parse = resp.data as ResultInfo<any>;
        LogSuccess(parse.msg)
    })

}
const changePage = () => {
    isLoginPage.value = !isLoginPage.value
    ref_email.value = ""
    ref_password.value = ""
    ref_rePassword.value = ""
}
</script>

<style scoped lang="sass">
@import "../../assets/sass/login"

</style>
